import { defineComponent } from "vue";
import style from "./index.module.less";
import PageTitle from "@/components/PageTitle";
import Banner from "@/components/Banner";
import CardView from "@/components/CardView";
import Title from "@/components/Title";
import TitleView from "@/components/TitleView";
import Text from "@/components/Text";
import RowView from "@/components/RowView";
import IconText from "@/components/IconText";
import { useRequest } from "./request";
import ButtonGroupView from "@/components/ButtonGroupView";
import { getSize } from "@/command/apiTool";
import { IButtonGroupViewData } from "@/components/ButtonGroupView/types";
export default defineComponent({
  name: "",
  setup() {
    const { getDetail } = useRequest();
    const render1 = () => {
      return <img src={getDetail.value.img} class="w-full h-[206px]" />;
    };
    const render2 = () => {
      const getDetailInfo = getDetail.value;
      return (
        <CardView radius={0}>
          <TitleView
            title={getDetailInfo.name}
            // right={() => (
            //   <span class="text-[12px] text-[#999]">89%农户选择</span>
            // )}
          />
          <Text class="mt-[10px]">{getDetailInfo.comment}</Text>
          {/* <RowView class="justify-between mt-[10px]">
            <IconText
              url="https://img0.baidu.com/it/u=455228103,934359577&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1680022800&t=4962a86a7d889588d7a5be08271cbdfc"
              text="12312"
            />
            <Text>镇海区九龙湖镇</Text>
          </RowView> */}
        </CardView>
      );
    };
    const render3 = () => {
      const list = getDetail.value;
      return (
        <div>
          {list.list.map((item: any) => {
            return (
              <CardView title={item.title} class="mt-[10px]" radius={0}>
                <Text>{item.meno}</Text>
              </CardView>
            );
          })}
        </div>
      );
    };
    const render4 = () => {
      const data: IButtonGroupViewData[] = [
        {
          text: "咨询大户",
          childClass: "!h-[40px]",
          style: {
            width: getSize(165),
            border: "none",
            background: "linear-gradient(271deg, #F06F08 0%, #FEBD9F 100%)",
          },
        },
        {
          text: "申请代购",
          childClass: "!h-[40px]",
          style: {
            width: getSize(165),
            background: "linear-gradient(270deg, #1989FA 0%, #1989FA 100%)",
          },
        },
      ];
      return (
        <div
          class="fixed left-0 right-0 bottom-0 h-[61px] flex items-center justify-center bg-white px-[10px]"
          style={{ boxShadow: "0px -3px 12px 1px rgba(0,0,0,0.1);" }}
        >
          <ButtonGroupView data={data} />
        </div>
      );
    };
    return () => {
      return (
        <PageTitle title="百科品种详情" childClass="!p-[0px]">
          {render1()}
          {render2()}
          {render3()}
          {render4()}
        </PageTitle>
      );
    };
  },
});
